<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>发表文章</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="/javascripts/jquery-2.1.0.min.js">
    </script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
    *{
        margin: 0px;
        padding:0px;
    }
    body,html{
      height: 100%;
    }

    #page {
         height: 100%;
        width: 1200px;
        margin: 0px auto;
    }

    input {
        width: 400px;
        line-height: 40px;
        display: block;
        margin-top: 20px;
    }
    #float_view{
       height: 100%;
       position: fixed;
       top:0px;
       left: 0px;
       width: 100%;
       background: rgba(0,0,0,0.6);
       z-index: 999999999;
    }
    #msg{
        font-size: 40px;
        color: white;
        text-align: center;
        padding-top: 200px;
    }
    #btns button{
        width: 200px;
        background: orange;
        line-height: 40px;
        margin:0px auto;
        display: block;
        margin-top: -20px;
        border-radius: 20px;
    }
    </style>
</head>

<body>
    <div id="float_view">
        <div id="msg">发布中,请稍后。。。</div>
    </div>
    <div id="page">
        <h1>欢迎来发布文章哦</h1>
        <select class="form-control" id="article_type" style="width: 200px;">
            <option value='01'>前端</option>
            <option value='02'>node</option>
            <option value='03'>微信开发</option>
            <option value='04'>原生app</option>
            <option value='05'>服务端</option>
            <option value='06'>杂谈</option>
        </select>
        <input type="" id="article_title" name="" placeholder="文章标题">
        <input type="" id="actor" name="" placeholder="作者">
        <script id="editor" type="text/plain" style="margin-top: 20px;width:1024px;height:500px;z-index: 0;"></script>
    </div>
    <div id="btns" style="">
        <div>
            <button onclick="getAllHtml()">发布</button>
        </div>
    </div>
    <script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    $("#float_view").hide();
    function getAllHtml() {
        
        var metaHeader = '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">';
        var tmsg = metaHeader + UE.getEditor('editor').getAllHtml();
        var con = metaHeader + UE.getEditor('editor').getContentTxt();
        con = con.split(">")[1];
        var jsonData = {
            title: document.getElementById("article_title").value,
            note: con.substr(0, 50),
            type: document.getElementById("article_type").value,
            author: document.getElementById("actor").value,
            time: Date.parse(new Date()),
            num: 0,
            msg: tmsg.replace(/'/g, '"'),

        }
        if (jsonData.title == "") {
            alert("请输入标题");
        } else if (jsonData.author == "") {
            alert("请输入作者名字");
        } else {
            $("#float_view").show();
            $.ajax({
                url: "/article/toRelease",
                type: "post",
                dataType: "json",
                data: jsonData,
                success: succesFunc,
                error: errorFunc
            });

            function succesFunc(resquest) {
                console.log(resquest);
                $("#float_view").hide();
                alert("成功");

            }

            function errorFunc(resquest) {
                $("#float_view").hide();
                alert("失败");
            }
        }



    }
    </script>
</body>

</html>